<template>
	<div class="all">
		<div class="left" v-if="shouma">
			<left @shouqilai="shou"></left>
		</div>
		<div class="left2" @click="shou" v-if="!shouma">开</div>
		<div class="right" ref="right">
			<div class="top">
				<top></top>
			</div>
			<div class="content" v-loading = 'loading'>
				<div class="flexb">
					<div class="flex">
						<el-button type="warning" @click="log = true">加卡</el-button>
						<el-button type="warning" @click="log2 = true">批量标记换卡</el-button>
					</div>

					<el-button type="warning" @click="go('/ka/kajilu')">查看加卡记录</el-button>
				</div>
				<div class="flex" style="margin-top: 20px;">
					<el-input v-model="search.iccid" style="width: 150px; margin-right: 10px;" placeholder="ICCID"></el-input>
					<el-input v-model="search.phone" style="width: 150px; margin-right: 10px;" placeholder="用户账户"></el-input>
					<el-input v-if="shouma" v-model="search.acessNumber" style="width: 120px; margin-right: 10px;" placeholder="接入号"></el-input>
					<el-input v-if="shouma" v-model="search.merchantName" style="width: 120px; margin-right: 10px;" placeholder="分销商"></el-input>
					
					<el-select v-if="shouma" v-model="search.status" style="width: 120px; margin-right: 10px;" clearable placeholder="状态">
						<el-option v-for="item in statusall" :key="item.id" :label="item.name" :value="item.id"></el-option>
					</el-select>
					
					
					<el-date-picker v-if="shouma" style="width: 470px; margin-right: 10px;" v-model="search.time" @change="timechange" value-format="yyyy-MM-dd HH:mm:ss"
					 type="datetimerange" range-separator="——" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
					<el-button type="warning" @click="searchs">搜索</el-button>
					<el-button type="warning" @click="daochu">导出</el-button>
				</div>
				<div class="table">
					<el-table :data="tableData" border style="width: 100%">
						<!-- <el-table-column  label="序号ID" >
                       <template slot-scope="scope">
                          {{ scope.row.id }}
                        </template>
                    </el-table-column> -->
						<el-table-column label="ICCID">
							<template slot-scope="scope">
								{{ scope.row.iccid }}
							</template>
						</el-table-column>
						<el-table-column label="绑定用户账户">
							<template slot-scope="scope">
								{{ scope.row.phone }}
							</template>
						</el-table-column>
						<el-table-column label="代理商">
							<template slot-scope="scope">
								{{ scope.row.merchantName }}
							</template>
						</el-table-column>
						<el-table-column label="接入号码">
							<template slot-scope="scope">
								{{ scope.row.acessNumber }}
							</template>
						</el-table-column>
						<el-table-column label="所属套餐">
							<template slot-scope="scope">
								{{ scope.row.packageId_dictText }}
							</template>
						</el-table-column>
						<el-table-column label="当前阈值">
							<template slot-scope="scope">
								{{ scope.row.useFlow }}
							</template>
						</el-table-column>
						<el-table-column label="最后缴费月份">
							<template slot-scope="scope">
								{{ scope.row.paid_month }}
							</template>
						</el-table-column>
						<el-table-column label="卡类型">
							<template slot-scope="scope">
								<span v-if='scope.row.iotType==0'>辽宁联通</span>
								<span v-if='scope.row.iotType==1'>湖北联通</span>
								<span v-if='scope.row.iotType==2'>铂明联通</span>
								<span v-if='scope.row.iotType==3'>重庆巴南</span>
							</template>
						</el-table-column>
						<el-table-column label="状态">
							<template slot-scope="scope">
									<span v-if="scope.row.status == 0">停机</span>
									<span v-if="scope.row.status == 1">正常使用</span>
									<span v-if="scope.row.status == 2">标记换卡</span>
									<span v-if="scope.row.status == 3">待生效</span>
									/
									<span v-if="scope.row.delFlag == 0">正常</span>
									<span v-if="scope.row.delFlag == 1">注销</span>
									
							</template>
						</el-table-column>
						<el-table-column label="绑卡时间">
							<template slot-scope="scope">
								{{ scope.row.bindTime }}
							</template>
						</el-table-column>
						<el-table-column label="操作">
							<template slot-scope="scope">
								<el-button type="text" @click="go('/ka/kaxiangqing',scope.row.id,scope.row.iccid)">查看详情</el-button>
							</template>
						</el-table-column>
					</el-table>
					<el-pagination style="text-align: right; padding: 20px;" background layout="total,prev, pager, next" :current-page="page"
					 @current-change="fanye" :page-size="page_size" :total="total"></el-pagination>
				</div>
			</div>
		</div>
		<el-dialog title="加卡" :visible.sync="log" :close-on-click-modal="false" width="600px">
			<div class="flex">
				<div class="f1">
					<el-radio v-model="jia.radio" label="1">按区间:</el-radio>
				</div>
				<div class="f2">
					<el-input v-model="jia.start_num" style="width: 200px;" placeholder="起始ICCID"></el-input>
					-
					<el-input v-model="jia.end_num" style="width: 200px;" placeholder="结束ICCID"></el-input>
				</div>
			</div>
			<div class="flex">
				<div class="f1">
					<el-radio v-model="jia.radio" label="2">按导入:</el-radio>
				</div>
				<div class="f2">
					<el-upload class="upload-demo" ref="upload" action="https://jsonplaceholder.typicode.com/posts/" :file-list="fileList"
					 :limit='1' :on-change="shangchuan" :auto-upload="false">
						<el-button slot="trigger" type="warning">选取文件</el-button>
					</el-upload>
					<el-button type="text" @click="xiazai">下载导入模板</el-button>
				</div>
			</div>
			<div class="flex">
				<div class="f1">选择代理商:</div>
				<div class="f2">
					<el-select v-model="jia.agent_id" clearable placeholder="选择代理商">
						<el-option v-for="item in options" :key="item.id" :label="item.agentName" :value="item.id"></el-option>
					</el-select>
				</div>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="log = false">取 消</el-button>
				<el-button type="primary" @click="tianjia">确 定</el-button>
			</span>
		</el-dialog>
		<el-dialog title="标记换卡" :visible.sync="log2" :close-on-click-modal="false" width="600px">
			<div class="flex">
				<div class="f2">
					<el-upload class="upload-demo" ref="upload" action="https://jsonplaceholder.typicode.com/posts/" :file-list="fileList"
					 :limit='1' :on-change="shangchuan2" :auto-upload="false">
						<el-button slot="trigger" type="warning">选取文件</el-button>
					</el-upload>
					<el-button type="text" @click="xiazai2">下载导入模板</el-button>
				</div>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="log2 = false">取 消</el-button>
				<el-button type="primary" @click="tianjia2">确 定</el-button>
			</span>
		</el-dialog>
		<el-dialog title="加卡失败" :visible.sync="log3" :close-on-click-modal="false" width="600px">
			<div v-for="(item,index) in jiakashibai" :key="index">
				{{item}}
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="log3 = false">知道了</el-button>
			</span>
		</el-dialog>
		
	</div>
</template>

<script>
	import axios from 'axios'
	import top from '@/components/top.vue'
	import left from '@/components/left.vue'
	import bus from '@/assets/bus.js'
	
	import FileSaver from 'file-saver'
	import XLSX from "xlsx"
	
	export default {
		name: 'ka',
		components: {
			left,
			top
		},
		data() {
			return {
				statusall:[
					{id:0,name:"停机"},
					{id:1,name:"正常使用"},
					{id:2,name:"标记换卡"},
					{id:3,name:"待生效"}
				],
				options: [],
				fileList: [],
				jia: {
					file: "",
					start_num: "",
					end_num: "",
					agent_id: "",
					radio: "1"
				},
				huan: {
					file: "",
					start_num: "",
					end_num: "",
					agent_id: "",
					radio: "1"
				},
				taocan: {
					mobile: ""
				},
				changecon: {

				},
				search: {
					iccid:"",
					phone:"",
					acessNumber:"",
					merchantName:"",
					status:"",
					time:"",
					beginTime:"",
					endTime:""
				},
				log: false,
				log2:false,
				log3:false,
				jiakashibai:"",
				page: 1,
				page_size: 20,
				total: 0,
				loading: false,
				tableData: [],
				shouma:true
			}
		},
		watch: {
			// num:function(newValue, oldValue) {
			//   console.log(newValue, oldValue)
			// }
		},
		computed: {
			// zongjia:function(){
			//   return this.num * 100
			// }
		},
		created() {
			this.getlist()
			this.getfenxiaoshang()

		},
		methods: {
			shou:function(){
				this.shouma = !this.shouma
				this.$refs.right.style.width = "100%"
			},
			daochu:function(){
				const a = document.createElement('a');
				a.setAttribute('download', '');
				a.setAttribute('href', this.url + '/work/card/exportXls');
				a.click();
			},
			//导出
			// daochu: function() {
			// 	this.axios.get(this.url + `/work/card/exportXls`)
			// 		.then(response => {
			
			// 			if (response.data.success == true) {
			
			// 				let multipleSelection = response.data.result
			// 				console.log(multipleSelection)
			// 				var wopts = {
			// 					bookType: 'xlsx',
			// 					bookSST: true,
			// 					type: 'binary'
			// 				};
			// 				var workBook = {
			// 					SheetNames: ['Sheet1'],
			// 					Sheets: {},
			// 					Props: {}
			// 				};
			// 				var table = [];
			// 				for (var i = 0; i < multipleSelection.length; i++) {
			// 					var params = {
			// 						activitiSync: multipleSelection[i].activitiSync,
			// 						avatar: multipleSelection[i].avatar,
			// 						birthday: multipleSelection[i].birthday,
			// 						createBy: multipleSelection[i].createBy,
			// 						createTime: multipleSelection[i].createTime,
			// 						delFlag: multipleSelection[i].delFlag,
			// 						departIds: multipleSelection[i].departIds,
			// 						departIds_dictText: multipleSelection[i].departIds_dictText,
			// 						email: multipleSelection[i].email,
			// 						money: multipleSelection[i].money,
			// 						orgCode: multipleSelection[i].orgCode,
			// 						orgCodeTxt: multipleSelection[i].orgCodeTxt,
			// 						phone: multipleSelection[i].phone,
			// 						post: multipleSelection[i].post,
			// 						post_dictText: multipleSelection[i].post_dictText,
			// 						realname: multipleSelection[i].realname,
			// 						relTenantIds: multipleSelection[i].relTenantIds,
			// 						sex: multipleSelection[i].sex,
			// 						sex_dictText: multipleSelection[i].sex_dictText,
			// 						status: multipleSelection[i].status,
			// 						status_dictText: multipleSelection[i].status_dictText,
			// 						telephone: multipleSelection[i].telephone,
			// 						thirdType: multipleSelection[i].thirdType,
			// 						updateBy: multipleSelection[i].updateBy,
			// 						updateTime: multipleSelection[i].updateTime,
			// 						userIdentity: multipleSelection[i].userIdentity,
			// 						username: multipleSelection[i].username,
			// 						workNo: multipleSelection[i].workNo
			// 					}
			// 					table[i] = params
			// 					console.log(table)
			// 				};

			// 				workBook.Sheets['Sheet1'] = XLSX.utils.json_to_sheet(table);
			// 				FileSaver.saveAs(new Blob([this.changeData(XLSX.write(workBook, wopts))], {
			// 					type: 'application/octet-stream'
			// 				}), "sheetjs.xlsx")
			
			// 			} else {
			// 				this.$message.error(response.data.message);
			// 			}
			// 		})
			
			// },
			handleExceed: function(files, fileList) {
				this.$message.warning(`最多选择一个文件`);
			},
			shangchuan: function(file) {
				this.jia.file = file.raw
			},
			shangchuan2: function(file) {
				this.huan.file = file.raw
			},
			go: function(url, id,iccid) {
				this.$router.push({
					path: url,
					query: {
						id: id,
						iccid:iccid
					}
				})
			},
			//标记换卡模板
			xiazai2:function(){
				const a = document.createElement('a');
				a.setAttribute('download', '');
				a.setAttribute('href', this.url + '/work/card/getEecelDemo');
				a.click();
			},
			//加卡模板
			xiazai: function() {
				const a = document.createElement('a');
				a.setAttribute('download', '');
				a.setAttribute('href', this.url + '/work/card/getEecelDemo');
				a.click();
			},
			//获取分销商
			getfenxiaoshang: function() {
				this.axios.get(this.url + `/work/agent/list?pageNo=${this.page}&pageSize=1000`)
					.then(response => {
						if (response.data.success == true) {
							this.options = response.data.result.records
						} else {
							this.$message.error(response.data.message);
						}
					})
			},
			timechange: function() {
				if (this.search.time == null) {
					this.search.beginTime = ""
					this.search.endTime = ""
				} else {
					this.search.beginTime = this.search.time[0]
					this.search.endTime = this.search.time[1]
				}
			},
			searchs:function(){
				this.loading = true
				this.page = 1
				this.getlist()
			},
			//翻页
			fanye: function(page) {
				this.loading = true
				this.page = page
				this.getlist()
			},
			//获取列表
			getlist: function() {

				let url = this.url +
					`/work/card/list?pageNo=${this.page}&pageSize=${this.page_size}&status=${this.search.status}
					&phone=${this.search.phone}&acessNumber=${this.search.acessNumber}&merchantName=${this.search.merchantName}
				&beginTime=${this.search.beginTime}&endTime=${this.search.endTime}&iccid=${this.search.iccid}`

				this.axios.get(url)
					.then(response => {
						if (response.data.success == true) {
							console.log(response.data.result.records)
							this.tableData = response.data.result.records
							this.total = response.data.result.total
							this.loading = false
						} else {
							this.$message.error(response.data.message);
						}
					})
			},
			tianjia2:function(){
				let url = ""
				var formData = new FormData();
				url = this.url + `/work/card/tagCardBatch`
				formData.append("file", this.huan.file)
				this.axios.post(url, formData)
					.then(response => {
						if (response.data.success == true) {
							
							if(response.data.result != ''){
								this.jiakashibai = response.data.result
								this.log3 = true
							}else{
								this.loading = true
								this.getlist()
								this.$message.success("标记换卡");
								this.log2 = false
								
							}
						} else {
							this.$message.error(response.data.message);
						}
					})
			},
			tianjia: function() {

				if (this.jia.start_num == '' && this.jia.end_num == '' && this.jia.file == '') {
					this.$message.error('必须选择文件或者填写区间');
				}

				let url = ""
				var formData = new FormData();

				if (this.jia.radio == 2) {
					url = this.url + `/work/card/addCardBatch`
					formData.append("id", this.jia.agent_id)
					formData.append("file", this.jia.file)
				} else {
					url = this.url +
						`/work/card/addCardBatchWithNum?agent_id=${this.jia.agent_id}&end_num=${this.jia.end_num}&start_num=${this.jia.start_num}`
				}

				this.axios.post(url, formData)
					.then(response => {
						if (response.data.success == true) {
							if(response.data.result != ''){
								this.jiakashibai = response.data.result
								this.log3 = true
							}else{
								this.loading = true
								this.getlist()
								this.$message.success("添加成功");
								this.log = false
								
							}
							
						} else {
							this.$message.error(response.data.message);
						}
					})
			},
			change: function() {
				this.log = true
			}
		},

	}
</script>

<style scoped lang="less">
	.all {
		display: flex;
		height: 100vh;

		.left {
			width: 200px;
			height: 100%;
			background: #414652;
			box-shadow: 0 2px 10px #2D3038;
		}

		.right {
			width: calc(100% - 180px);
			height: 100%;
			overflow: auto;

			.content {
				padding: 20px;

				.table {
					margin-top: 20px;
				}
			}
		}
	}
</style>
